//先得到小区域的大小
//小区域/小图=大区域/大图 反推,修改小区域
//小区域=(大区域/大图)*中图
//大图的比列=大区域/小区域

(function () {
    $.fn.extend({
        _magnifier() {
            //先得到小区域的大小
            ////小区域=(大区域/大图)*中图
            $("#smallArea").css({
                width: $("#bigArea").width() / $("#bigImg").width() * $("#middleImg").width(),
                height: $("#bigArea").height() / $("#bigImg").height() * $("#middleImg").height()
            });

            //大图的比列=大区域/小区域
            let $proportion = $("#bigArea").width() / $("#smallArea").width();

            //鼠标进入中图,小区域和大区域显示,离开隐藏
            $("#middleImg").on("mouseenter", function () {
                $("#smallArea").show();
                $("#bigArea").show();
            }).on("mouseleave", function () {
                $("#smallArea").hide();
                $("#bigArea").hide();
            })

            //再中图片里移动小区域
            $("#middleImg").on("mousemove", function (e) {
                let $mX = e.pageX - $("#middleImg").offset().left - $("#smallArea").width() / 2;
                let $mY = e.pageY - $("#middleImg").offset().top - $("#smallArea").height() / 2;

                //位置边界判断
                if ($mX <= 0) {
                    $mX = 0;
                }
                if ($mX >= $("#middleImg").width() - $("#smallArea").width()) {
                    $mX = $("#middleImg").width() - $("#smallArea").width();
                }
                if ($mY <= 0) {
                    $mY = 0;
                }
                if ($mY >= $("#middleImg").height() - $("#smallArea").height()) {
                    $mY = $("#middleImg").height() - $("#smallArea").height();
                }

                //小区域的位置
                $("#smallArea").css({
                    left: $mX,
                    top: $mY
                })
                //大图反向走
                // 小区域移动的位置*大图的比例*-1.反着走
                $("#bigImg").css({
                    left: $proportion * $mX * -1,
                    top: $proportion * $mY * -1
                })
            })
            $("#smallImg").find("li").on("click", function () {
                console.log(this);
                let $smallIndex = $(this).index();
                let $srcHtml1 = `../img/log${$smallIndex}.jpg`;
                let $srcHtml2 = `../img/log${$smallIndex}.1.jpg`;
                $("#middleImg").find("img").attr("src", $srcHtml1)
                $("#bigImg").attr("src", $srcHtml2)
            })

        }
    })
})()

$(function () {
    $(".nav_edition_left")._magnifier();
})
